<template>
	<view class="content">
		<view class="pop_bg" v-show='head' @tap="closeNavSwitch" @touchmove.stop.prevent=''>
			<view class="pop_bg_item1 pop_bg_item_left">
				<view class="left_item" :class="[index == headIndex ? 'name_active' : '']" v-for="(item, index) in titledata" :key="index"
				 @tap.stop="gotocreate(index,item.title)">
					<text>{{item.title}}</text><i v-if="index == headIndex" class="iconfont iconduigou"></i>
				</view>
			</view>
		</view>
		<view class="top">
			<input type="text" v-model="files_name" placeholder="请输入关键词" placeholder-class="inputDefault" @input="searchName" />
			<view class="pop" :class="sortIf?'name_active':''"  @tap="sortClick">排序<i class="iconfont iconxiala" :class="sortIf?'i_active':''"></i></view>
			<view class="pop" :class="typeIf?'name_active':''"  @tap="typeClick">类型<i class="iconfont iconxiala" :class="typeIf?'i_active':''"></i></view>
		</view>
		<view class="popCont" v-show="sortIf" @tap="closeNavSwitch" @touchmove.stop.prevent=''>
			<view class="popItem" v-for="(item,index) in sortList" :key="index" @tap.stop="sortItem(item.type,index)">
				<view :class="[index == sortIndex ? 'name_active' : '']">{{item.name}}</view>
				<i v-if="index == sortIndex" class="iconfont iconduigou"></i>
			</view>
		</view>
		<view class="popCont" v-show="typeIf" @tap="closeNavSwitch" @touchmove.stop.prevent=''>
			<view class="popItem" v-for="(item,index) in typeList" :key="index" @tap.stop="typeItem(item.type,index)">
				<view :class="[index == typeIndex ? 'name_active' : '']">{{item.name}}</view>
				<i v-if="index == typeIndex" class="iconfont iconduigou"></i>
			</view>
		</view>
		<view class="none" v-if="dataList.length == 0">没有数据</view>
		<view class="cont" v-else>
			<view class="item" v-for="(item,index) in dataList" :key="index" @tap="detail(item.tid,item.files_name,item.files_type,item.star_num)">
				<view class="itemTop">
					<view class="name">
						<i v-show="item.files_type == 2" class="iconfont iconshipinziyuan"></i>
						<i v-show="item.files_type == 1" class="iconfont iconwendangziyuan"></i>
						<i v-show="item.files_type == 3" class="iconfont iconyinpinziyuan"></i>
						{{item.files_name}}
					</view>
					<view class="fraction">{{item.star_num}}</view>
				</view>
				<view class="itemBottom">
					<view class="state">
						<view>已售{{item.purchase_num}}</view>
						<view>查看{{item.watch_num}}</view>
					</view>
					<view class="price" v-show="item.is_pay == 0">免费</view>
					<view class="price" v-show="item.is_pay == 1">￥{{item.pay_cion}}</view>
					<view class="price2" v-show="item.is_exemption == 1">限时{{item.exemption_time}}天免费</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="dataList.length > 7" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				titledata: [{
						title: '全部资源'
					},
					{
						title: "我的资源"
					},
				],
				head: false,
				headIndex: 0,
				dataList: [],
				sortList: [{
						'name': '综合',
						type: ''
					},
					{
						'name': '价格低',
						type: 'm_order'
					},
					{
						'name': '人气高',
						type: 'per_order'
					},
					{
						'name': '时间近',
						type: 'creat_time'
					}
				],
				sortIndex: 0,
				sortIf: false,
				typeList: [{
						'name': '全部',
						type: ''
					},
					{
						'name': '视频',
						type: 2
					},
					{
						'name': '音频',
						type: 3
					},
					{
						'name': '文档',
						type: 1
					},
					// {'name':'已购买'}
				],
				typeIndex: 0,
				typeIf: false,
				zid: '',
				files_type: '',
				files_name: '',
				order_type: '',
				question_id: '',
				page: 1,
				status: 'more',
				reload: true,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				url: ''
			}
		},
		onNavigationBarButtonTap() {
			this.head = !this.head
			this.$forceUpdate();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getAll();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function(){
				_this.getAll();
			},500);
		},
		onLoad(e) {
			this.zid = e.zid;
			this.question_id = e.question_id;
			this.url = 'user/resources.lists/Reslists';
			this.getAll();
		},
		methods: {
			/* 查看全部资源 */
			getAll() {
				var data = {
					question_id: this.question_id,
					page: this.page,
					pagesize: 8
				}
				if (this.files_type) {
					data.files_type = this.files_type
				}
				if (this.files_name) {
					data.files_name = this.files_name
				}
				if (this.order_type) {
					data.order_type = this.order_type
				}
				this.$zapi.apiPost(this.url, data).then(res => {
					if(res.data.code == 200) {
						var list = res.data.data.data;
						this.dataList = this.reload ? list : this.dataList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if(this.reload){
							this.dataList = [];
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}else{
							this.status='noMore';	
						}
					}
				})
			},
			/* 搜索资源名称 */
			searchName() {
				this.reload = true;
				this.page = 1;
				this.getAll();
			},
			/* 排序伸展 */
			sortClick() {
				this.sortIf = !this.sortIf;
				this.typeIf = false;
			},
			/* 排序切换 */
			sortItem(type, index) {
				this.sortIndex = index;
				this.sortIf = false;
				this.order_type = type;
				this.reload = true;
				this.page = 1;
				this.getAll();
			},
			/* 类型伸展 */
			typeClick() {
				this.typeIf = !this.typeIf;
				this.sortIf = false;
			},
			/* 类型切换 */
			typeItem(type, index) {
				this.typeIndex = index;
				this.typeIf = false;
				this.files_type = type;
				this.reload = true;
				this.page = 1;
				this.getAll();
			},
			/* 跳转资源详情 */
			detail(tid, name, type, num) {
				uni.navigateTo({
					url: 'resources_Detail?tid=' + tid + '&name=' + name + '&type=' + type + '&num=' + num
				})
			},
			/* 关闭蒙版 */
			closeNavSwitch() {
				this.head = false;
				this.sortIf = false;
				this.typeIf = false;
			},
			/* 导航栏右侧按钮点击事件 */
			gotocreate: function(index, title) {
				this.head = !this.head;
				this.headIndex = index;
				if(this.headIndex == 0){
					this.url = 'user/resources.lists/Reslists';
				} else if(this.headIndex == 1){
					this.url = 'user/resources.lists/ReslistByOne';
				}
				this.reload = true;
				this.page = 1;
				this.getAll();
				/* 改变导航栏右侧标题文字 */
				// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(1, {
					text: title,
				});
				// #endif
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFAFA;
	}

	/* 蒙版 */
	.pop_bg {
		position: fixed;
		top: 0;
		z-index: 600;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
	}

	.pop_bg_item1 {
		position: absolute;
		right: 20upx;
		margin-top: 20upx;
		width: 30%;
		background-color: #ffffff;
		border-radius: 10upx;
	}

	.pop_bg_item1:before {
		content: "";
		position: absolute;
		display: inline-block;
		border-width: 18upx;
		border-style: solid;
		border-color: white transparent transparent transparent;
		transform: rotate(180deg);
		top: -30upx;
	}

	.pop_bg_item_left:before {
		right: 5%;
	}

	.left_item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		width: 100%;
		font-size: 32upx;
		padding: 15upx 0;
		color: #333333;
	}

	.left_item text {
		margin: 0 20upx 0 30upx;
	}

	/* 顶部 */
	.top {
		width: 100%;
		height: 88upx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		display: flex;
		justify-content: flex-start;
	}

	.top input {
		width: 380upx;
		line-height: 1;
		background-color: #FAFAFA;
		margin-top: 20upx;
		margin-left: 30upx;
		border-radius: 12upx;
	}

	.inputDefault {
		color: #999999;
		font-size: 30upx;
		text-align: center;
		background-image: url('../../static/image/search.png');
		background-repeat: no-repeat;
		background-position: 20% 50%;
		background-size: 8%;
	}

	.pop {
		width: 110upx;
		margin: 0 30upx;
		line-height: 88upx;
		display: flex;
		justify-content: space-between;
		color: #333333;
		font-size: 34upx;
	}

	.pop i {
		color: #999999;
		line-height: 88upx;
	}

	.popCont {
		position: fixed;
		top: 88upx;
		width: 100%;
		height: calc(100% - 88upx);
		background-color: rgba(0, 0, 0, .5);
	}

	.popItem {
		display: flex;
		justify-content: space-between;
		height: 88upx;
		padding: 0 30upx;
		background-color: #FFFFFF;
		border-top: 2upx solid #E5E5E5;
	}

	.popItem view {
		line-height: 88upx;
		color: #666666;
		font-size: 30upx;
	}

	.popItem i {
		line-height: 88upx;
		color: #FFB800;
	}

	.name_active {
		color: #FFB800 !important;
	}
	.i_active{
		color: #FF9900 !important;
		transform: rotate(180deg);
	}

	.cont {
		margin-top: 118upx;
		background-color: #FAFAFA;
		z-index: 1;
	}

	.item {
		width: 690upx;
		margin: 30upx auto 20upx;
		background-color: #FFFFFF;
	}

	.itemTop {
		display: flex;
		justify-content: space-between;
		padding: 30upx;
	}

	.name {
		display: flex;
		justify-content: flex-start;
		color: #333333;
		font-size: 36upx;
		line-height: 1.2;
	}

	.name i {
		color: #00ACFE;
		font-size: 40upx;
		line-height: 1;
		margin-right: 10upx;
	}

	.name .iconyinpinziyuan {
		font-size: 50upx;
		line-height: 0.8;
	}

	.fraction {
		color: #00ACFE;
		font-size: 36upx;
		line-height: 1.2;
	}

	.itemBottom {
		display: flex;
		justify-content: space-between;
	}

	.state {
		display: flex;
		justify-content: flex-start;
		color: #666666;
		font-size: 28upx;
		line-height: 1.2;
		margin-left: 30upx;
	}

	.state view {
		margin-right: 20upx;
	}

	.price {
		width: 114upx;
		height: 66upx;
		line-height: 66upx;
		text-align: center;
		background: rgba(255, 153, 0, 0.1);
		border-radius: 17px 0px 4px 0px;
		color: #FF9900;
		font-size: 28upx;
	}

	.price2 {
		width: 198upx;
		height: 42upx;
		line-height: 42upx;
		text-align: center;
		text-indent: 24upx;
		margin-top: 24upx;
		color: #FFFFFF;
		font-size: 26upx;
		background-image: url('../../static/image/free.png');
		background-size: 100% 100%;
		opacity: 1;
	}
	.none{
		color: #999999;
		text-align: center;
		margin-top: 200upx;
	}
</style>
